<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>

<%--
  ~ Copyright (c) 2017 22420103@QQ.COM 版权所有
  ~
  --%>

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
		<meta charset="utf-8" />
		<meta name="description" content="Draggabble Widget Boxes with Persistent Position and State" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0" />
		<c:set var="ctx" value="${pageContext.request.contextPath}" />
		<!-- bootstrap & fontawesome -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/bootstrap.min.css" />
		<link rel="stylesheet" href="${ctx }/static/assets/font-awesome/4.5.0/css/font-awesome.min.css" />
		<!-- page specific plugin styles -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/jquery-ui.custom.min.css" />
		<!-- text fonts -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/fonts.googleapis.com.css" />
		<!-- ace styles -->
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
		<!--[if lte IE 9]>
			<link rel="stylesheet" href="${ctx }/static/assets/css/ace-part2.min.css" class="ace-main-stylesheet" />
		<![endif]-->
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace-skins.min.css" />
		<link rel="stylesheet" href="${ctx }/static/assets/css/ace-rtl.min.css" />
		<!--[if lte IE 9]>
		  <link rel="stylesheet" href="${ctx }/static/assets/css/ace-ie.min.css" />
		<![endif]-->
		<!-- inline styles related to this page -->
		<!-- ace settings handler -->
		<script src="${ctx }/static/assets/js/ace-extra.min.js"></script>
		<!-- HTML5shiv and Respond.js for IE8 to support HTML5 elements and media queries -->
		<!--[if lte IE 8]>
		<script src="${ctx }/static/assets/js/html5shiv.min.js"></script>
		<script src="${ctx }/static/assets/js/respond.min.js"></script>
		<![endif]-->
		<script src="${ctx }/static/assets/js/jquery-2.1.4.min.js"></script>
		<script type="text/javascript" src="${ctx }/static/js/jquery.tips.js"></script>
		<script src="${ctx }/static/assets/js/tree.min.js"></script>
		<script src="${ctx }/static/assets/js/ace-elements.min.js"></script>
		<script src="${ctx }/static/assets/js/ace.min.js"></script>
	</head>

	<body style="background-color: #fff;">
		<div id=context>
			<div class="row">
				<div class="col-xs-12">
					<div class="page-header">
						<h1>
							<a href="${ctx}/admin/systemManager/roleManager">权限管理</a>
							<small>
								<i class="ace-icon fa fa-angle-double-right"></i>
								修改权限
							</small>
						</h1>
					</div>
					<!-- PAGE CONTENT BEGINS -->
					<form class="form-horizontal" id="adminRoleForm" name="myform" role="form">
						<input type="hidden" name="id" value="${role.id}" />
						<input type="hidden" name="menuIds" id="menuIds" />
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right">权限名称</label>
							<div class="col-sm-9">
								<input type="text" id="name" name="name" placeholder="权限名称" class="col-xs-10 col-sm-5" value="${role.name}" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right">权限描述</label>
							<div class="col-sm-9">
								<input type="text" id="description" name="description" placeholder="权限描述" class="col-xs-10 col-sm-5" value="${role.description}" />
							</div>
						</div>
						<div class="form-group">
							<label class="col-sm-3 control-label no-padding-right">菜单赋权</label>
							<div class="col-sm-9 col-xs-10 col-sm-5" >
								<div class="widget-box widget-color-blue2">
									<div class="widget-header">
										<h4 id="selectMenus" class="widget-title lighter smaller">请选择</h4>
									</div>

									<div class="widget-body">
										<div class="widget-main padding-8">
											<ul id="tree1"></ul>
										</div>
									</div>
								</div>
							</div>
						</div>
						<div class="form-group" >
							<label class="col-sm-3 control-label no-padding-right"></label>
							<div class="col-sm-9 col-xs-10 col-sm-5" style="padding:10px;color:#f00;">
								<h4 id="messageText" class="widget-title lighter smaller"></h4>
							</div>
						</div>
						<div class="clearfix form-actions">
							<div class="col-md-offset-3 col-md-9">
								<button class="btn btn-info" type="button" onclick="sumbitRole()">
									<i class="ace-icon fa fa-check bigger-110"></i>
									确认
								</button>
								&nbsp; &nbsp; &nbsp;
								<button class="btn" type="reset">
									<i class="ace-icon fa fa-undo bigger-110"></i>
									取消
								</button>
							</div>
						</div>
					</form>

				</div><!-- /.col -->
			</div><!-- /.row -->
		</div>
	</body>
	<script>
		var ctx = "${ctx}";
        jQuery(function($){
            var sampleData = initiateDemoData();//see below


            $('#tree1').ace_tree({
                dataSource: sampleData['dataSource1'],
                multiSelect: true,
                cacheItems: true,
                'open-icon' : 'ace-icon tree-minus',
                'close-icon' : 'ace-icon tree-plus',
                'itemSelect' : true,
                'folderSelect': false,
                'selected-icon' : 'ace-icon fa fa-check',
                'unselected-icon' : 'ace-icon fa fa-times',
                loadingHTML : '<div class="tree-loading"><i class="ace-icon fa fa-refresh fa-spin blue"></i></div>'
            });


            /**
             //Use something like this to reload data
             $('#tree1').find("li:not([data-template])").remove();
             $('#tree1').tree('render');
             */

             //please refer to docs for more info
             $('#tree1')
             .on('loaded.fu.tree', function(e) {
                 //alert(e + "1");
			})
             .on('updated.fu.tree', function(e, result) {
                 //alert(e + "2");
			})
             .on('selected.fu.tree', function(e) {
                 //alert(e + "3");
				 console.log(e);
			})
             .on('deselected.fu.tree', function(e) {
                 //alert(e + "4");
			})
             .on('opened.fu.tree', function(e) {
                 //alert(e + "5");
			})
             .on('closed.fu.tree', function(e) {
                 //alert(e + "6");
			});


            function initiateDemoData(){

                var tree_data = $.parseJSON('${menus}');

                var dataSource1 = function(options, callback){
                    var $data = null
                    if(!("text" in options) && !("type" in options)){
                        $data = tree_data;//the root tree
                        callback({ data: $data });
                        return;
                    }
                    else if("type" in options && options.type == "folder") {
                        if("additionalParameters" in options && "children" in options.additionalParameters)
                            $data = options.additionalParameters.children || {};
                        else $data = {}//no data
                    }

                    if($data != null)//this setTimeout is only for mimicking some random delay
                        setTimeout(function(){callback({ data: $data });} , parseInt(Math.random() * 500) + 200);

                    //we have used static data here
                    //but you can retrieve your data dynamically from a server using ajax call
                    //checkout examples/treeview.html and examples/treeview.js for more info
                };
                return {'dataSource1': dataSource1 }
            }

        });

        //客户端校验
        function check() {
            if ($("#name").val() == "") {
                $("#name").tips({
                    side : 1,
                    msg : '权限名称不得为空',
                    bg : '#AE81FF',
                    time : 3
                });
                $("#name").focus();
                return false;
            }
            if ($("#menuIds").val() == "") {
                $("#selectMenus").tips({
                    side : 1,
                    msg : '菜单赋权不得为空',
                    bg : '#AE81FF',
                    time : 3
                });
                return false;
            }
            return true;
        }

		function sumbitRole() {
			//http://www.cnblogs.com/zgz21/p/5166871.html
			//http://blog.csdn.net/xudan1010/article/details/51735430
			//http://blog.csdn.net/wwwlgy/article/details/49804721
			//fuelux tree

            var output = "";
            var ids = "";
            var items = $('#tree1').tree('selectedItemsAndParents');
            for (var i in items) {
                if (items.hasOwnProperty(i)) {
                    var item = items[i];
                    ids += item.additionalParameters['id'] + ",";
                    output += item.text + ",";
                }
			}

            ids = ids.substring(0, ids.lastIndexOf(","));
            output = output.substring(0, output.lastIndexOf(","));
            //alert(ids + "___" + output);
			$("#menuIds").val(ids)

            if(!check()){
                return;
			}
            var data = $("#adminRoleForm").serialize();
            $.ajax({
                type:"POST",
                url:"updateRoleInfo",
                data:data,
				dataType:"json",
                cache:false,
                success:function(data){
                    if(data.code == "1"){
                        window.location.href="${ctx}/admin/systemManager/roleManager";
                    }else {
                        $("#messageText").html("温馨提示：" + data.msg);
                    }
                }
            });
        }
	</script>

</html>
